<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>群标签管理</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
		}
		.public_buttonSearch_container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: #fff;
		}
		.public_buttonSearch_container a{
			color: #fff;
			background-color: #1E9FFF;
			text-shadow: 0 -1px 0 rgba(0,0,0,.12);
			height: 24px;
			padding: 4px 15px;
			font-size: 14px;
			border-radius: 2px;
			display: flex;
			align-items: center;
			cursor: pointer;
		}
		.public_Search_container{
			position: relative;
		}
		.public_Search_container input{
			width: 240px;
			height: 32px;
			border: 1px solid #d9d9d9;
		}
		.public_Search_container i{
			position: absolute;
			bottom: 6px;
			right: 10px;
			cursor: pointer;
		}
		/*公共头部带搜索 end*/
		.public_table_container{
			padding: 0 20px 20px 20px;
		}
		/*内容*/
		.customerLabel_main_container{
			padding: 0 20px 20px 20px;
			border-top: 1px solid #e8e8e8;
		}
		.customerLabel_main_content{

		}
		.customerLabel_mainList_container{
			margin-left: 23px;
			padding-top: 23px;
			padding-bottom: 23px;
			border-bottom: 1px dashed #e8e8e8;
			display: -webkit-box;
			display: flex;
			-webkit-box-align: start;
			align-items: flex-start;
			position: relative;
		}
		.customerLabel_mainList_title{
			font-size: 15px;
			font-weight: bold;
			width: 140px;
		}
		.customerLabel_mainList_content{
			flex: 1;
			padding-right: 50px;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			flex-wrap: wrap;
		}
		.customerLabel_mainList_content li{
			height: 28px;
			display: -webkit-box;
			display: flex;
			-webkit-box-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			align-items: center;
			padding-left: 14px;
			padding-right: 14px;
			border: 1px solid #e9e9e9;
			color: rgba(0,0,0,.65);
			font-size: 14px;
			background: #f7f7f7;
			border-radius: 4px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		.customerLabel_mainListRight_container{
			display: flex;
			align-items: center;
			cursor: pointer;
			margin-left: 10px;
		}
		.customerLabel_mainListRight_container svg{
			width:14px;
			height: 14px;
		}
		.customerLabel_mainListRight_container span{
			color: #777;
			font-size: 14px;
			margin-left: 2px;
		}
		.add_active{
			background: #fff !important;
			box-shadow: 0 2px 0 rgba(0,0,0,.015) !important;
			cursor: pointer;
		}
		.add_active:hover{
			border-color: #40a9ff;
			color: #40a9ff;
			transition: all .3s
		}
		.inputLable{
			height: 28px;
			margin-bottom: 10px;
			outline: none;
			background: #fff;
			border: 1px solid #ececec;
			border-radius: 5px;
			padding: 0 10px;
			width: 111px;
			margin-right: 10px;
		}
		.inputLable:focus{
			border-color: #40a9ff;
		}
		.table-content-lable-h{
			margin-right: 5px;
			position: relative;
			cursor: pointer;
		}
		.table-content-lableHidden-h{
			display: flex;
			background: #ffffff;
			padding: 7px 5px;
			border: 1px solid #ececec;
			box-sizing: border-box;
			color: #1e9fff;
		}
		.table-content-lable-h:last-child{
			margin-right: 0;
		}
		.table-content-lableHidden-h b{
			border-right: 1px solid #ececec;
			display: block;
			padding: 0 5px;
		}
		.table-content-lableHidden-h b:last-child{
			border: none;
		}
		.table-content-lable-h-container{
			display: none;
			position: absolute;
			left: -26px;
			width: 81px;
		}
		.table-content-lable-h:hover .table-content-lable-h-container{
			display: block;
		}
	</style>
</head>
<body>
	
	<div class="public_container">
		<!-- /*公共头部带搜索*/ -->
		<div class="public_content">
			<div class="public_title_container">
				<p>企业群标签</p>
			</div>
			<div class="public_buttonSearch_container">
				<a id="addPeople">+ 添加标签组</a>
				<!-- <a href="javascript::void(0)" onclick="tongbu_tag()">同步企业标签</a> -->
				<div class="public_Search_container">
					<!-- <input type="text" name="title" required  lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input">
					<i class="layui-icon layui-icon-search"></i> -->
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="customerLabel_main_container">
			<div class="customerLabel_main_content">
	   			{loop $res as $re}
				<div class="customerLabel_mainList_container">
					<span class="customerLabel_mainList_title">{$re->group_name}</span>
					<ul class="customerLabel_mainList_content">
						<li class="add_active" >+ 添加</li>
						<input class="inputLable" type="text" name="" placeholder="输入后回车" style="display: none;" data-id="{$re->id}">
						<!-- 循环 -->
						{loop $re->tags as $tag}
							<div class="table-content-lable-h">
								<li>
									<span  onclick="edit_tag({$re->id},'{$tag['id']}')">{$tag['name']}</span>&nbsp;
									<i class="layui-icon layui-icon-close apanel-delete"onclick="del_tag({$re->id},'{$tag['id']}')"></i>
								</li>
							</div>
						{/loop}
					</ul>
					<div class="customerLabel_mainListRight_container" onclick="check('{$re->id}')">
						<svg id="editor" viewBox="0 0 1109 1024"><path d="M935.509333 977.834667H170.496a84.992 84.992 0 0 1-84.992-84.992V128.426667c0-46.933333 38.058667-84.992 84.992-84.992h510.037333a28.330667 28.330667 0 1 1 0 56.661333H198.826667a56.661333 56.661333 0 0 0-56.661334 56.661333v707.84c0 31.232 25.344 56.576 56.661334 56.576h708.266666a56.576 56.576 0 0 0 56.661334-56.576V354.901333a28.330667 28.330667 0 1 1 56.661333 0v537.941334a84.906667 84.906667 0 0 1-84.906667 84.992zM472.746667 602.794667a28.245333 28.245333 0 1 1-40.021334-40.106667L941.909333 51.2a28.330667 28.330667 0 1 1 40.106667 40.106667L472.746667 602.794667z"></path></svg>
						<span>编辑标签名</span>
					</div>
					<div class="customerLabel_mainListRight_container" onclick="del_tag_group('{$re->id}')">
						<svg id="editor" viewBox="0 0 1109 1024"><path d="M935.509333 977.834667H170.496a84.992 84.992 0 0 1-84.992-84.992V128.426667c0-46.933333 38.058667-84.992 84.992-84.992h510.037333a28.330667 28.330667 0 1 1 0 56.661333H198.826667a56.661333 56.661333 0 0 0-56.661334 56.661333v707.84c0 31.232 25.344 56.576 56.661334 56.576h708.266666a56.576 56.576 0 0 0 56.661334-56.576V354.901333a28.330667 28.330667 0 1 1 56.661333 0v537.941334a84.906667 84.906667 0 0 1-84.906667 84.992zM472.746667 602.794667a28.245333 28.245333 0 1 1-40.021334-40.106667L941.909333 51.2a28.330667 28.330667 0 1 1 40.106667 40.106667L472.746667 602.794667z"></path></svg>
						<span>删除标签组</span>
					</div>
				</div>
			   {/loop}
			</div>
		</div>
	</div>
	
<script src="/cdn/jquery.js"></script>
<script src="/layui/layui.js"></script>
<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		// 弹窗
		layui.use('layer', function(){
		  var layer = layui.layer;
		}); 
	</script>
	<script type="text/javascript">
		$('#addPeople').on('click',function(){
			layer.open({
		          type: 2,
		          title: '新建标签组',
				  shadeClose: true,
				  shade: 0.2,
				  area: ['700px', '400px'],
		          content: 'add_tag_group.html'
		    });
		})
	</script>
	<script type="text/javascript">
		let $div = '<input class="inputLable" type="text" name="" placeholder="输入后回车">';
		$('.add_active').click(function(){
			$(this).next().show();
			$(this).next().focus();
		})
		$(".inputLable").on("keypress",function(event){
			let id = $(this).data("id");
			if(event.keyCode == 13){
				myAjaxPost(false, true, 'add_tag.html', { tag_name:$(this).val(),id: id}, function (resp) {
					if (resp.status == 'success') {
						tusi(resp.msg);
						history.go(0);
					}else{
						alert(resp.msg);
					}
				});
			    $('.inputLable').val('');
			    $('.inputLable').hide();
			}  
		});
		$(".inputLable").blur(function(){
		  $('.inputLable').hide();
		  $('.inputLable').val('');
		});
		function check(id){
			layer.open({
			  type: 2,
			  title: '编辑标签',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '400px'],
			  content: 'update_name.html?id='+id
			});
		}
			
function del_tag(id,tagid){
	if(confirm('确定删除此标签吗？')){
		myAjaxPost(false, true, 'del_tag.html', { id:id,tagid:tagid}, function (resp) {
			if (resp.status == 'success') {
				tusi(resp.msg);
				history.go(0);
			}else{
				alert(resp.msg);
			}
		});
	}
}
function edit_tag(id,tagid){
	layer.open({
        type: 2,
        title: '编辑标签',
        area: ['50%', '50%'],
        content: 'edit_tag.html?id='+id+'&tagid='+tagid
    });
}

function del_tag_group(id){
	if(confirm('确定删除此标签组吗？')){
		myAjaxPost(false, true, 'del_tag_group.html', { id:id}, function (resp) {
				if (resp.status == 'success') {
					tusi(resp.msg);
					history.go(0);
				}else{
					alert(resp.msg);
				}
			});
	}
}
</script>
</body>
</html>